<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			/* 顶部效果 */
		   .top_content{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #eee;
			}
			/* 吸顶灯效果：默认效果 */
			.sticky{
				height: 50px;
				background-color: #333;
				text-align: center;
				color: #fff;
				line-height: 50px;
			}
			/* 页面主区域 */
			.main_content{
				height: 8000px;
				background-color: #eee;
			}
			/* 吸顶灯效果：定死页面顶部效果 */
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				// JQ相关操作   思路：滚动下拉条，超过200px,吸顶灯定死页面上
				// 超过200px   固定>滚动 吸顶灯通过添加样式操作：定死在页面上
				// ①固定值：获取到达吸顶灯位置的偏移量
				// offset() 获取或者设置元素相对于文档的偏移量
				// .top，获取body顶部
				var so=$(".sticky").offset().top;
				// $(window) 来监听窗口的事件：滚动、窗口视图大小
				// scroll() 来监听页面滚动事件
				$(window).scroll(function(){
					
					// 超过200px:
					// ②获取页面滚动值：动态值  scrollTop()获取滚动位置【动态值】
					var st=$(window).scrollTop();
					// 超过200px:  动态值>固定值200  条件满足：页面吸顶灯样式定死
					if(st>so){
						$(".sticky").addClass("ac");
					}else{
						$(".sticky").removeClass("ac");
					}
				});
				
				
			});
		</script>
	</head>
	<body>
		<div class="top_content">顶部内容区域</div>
		<div class="sticky">我是吸顶灯元素区域</div>
		<div class="main_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, tempore illum adipisci fugiat, eligendi iusto, saepe sed totam quod culpa dignissimos explicabo pariatur sit corporis aliquam accusantium quibusdam quidem recusandae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis pariatur earum iure doloribus architecto alias vitae distinctio nobis. Quia quas incidunt facilis alias obcaecati, dolorum ad quae harum suscipit dolorem?</div>
	</body>
</html>